<template>
	<view class="confirm-order-page">
		<!-- 收花人地址 -->
		<view class="address-section">
			<view class="address-label">收花人</view>
			<view class="address-add" @click="addAddress">添加收花地址 ></view>
		</view>

		<!-- 订花人电话 -->
		<view class="phone-section">
			<view class="phone-label">订花人电话</view>
			<input v-model="orderPhone" class="order-phone-input" placeholder="请输入下单人电话" />
			<uni-icons type="phone-filled" size="20" color="#07C160" class="phone-icon"></uni-icons>
		</view>

		<!-- 贺卡文字 -->
		<view class="card-section">
			<view class="card-header">
				<view class="card-label">贺卡文字</view>
				<view class="card-switch">
					<switch :checked="cardEnabled" @change="toggleCard"></switch>
				</view>
			</view>
			<textarea v-if="cardEnabled" class="card-input" placeholder="填写祝福语,请勿填写特殊符号和表情符号(选填)" maxlength="200"
				:value="cardText" @input="updateCardText"></textarea>
			<view class="card-count" v-if="cardEnabled">{{ cardText.length }}/200</view>
		</view>

		<!-- 商品信息 -->
		<view class="product-section">
			<view class="product-item" v-for="(item, index) in cartList" :key="index">
				<image :src="item.imageUrl" mode="aspectFit" class="product-img"></image>
				<view class="product-info">
					<view class="product-name">{{ item.name }}</view>
					<view class="product-price-count">
						<text class="product-price">¥{{ typeof item.price === 'number' ? item.price.toFixed(2) : 'NAN' }}</text>
						<text class="product-count">X{{ item.quantity }}</text>
					</view>
					<view class="product-time" v-if="item.spec">{{ item.spec }}</view>
				</view>
			</view>
			<!-- 直接显示 checkout 传递的实付款作为小计 -->
			<view class="subtotal">小计 ¥{{ subtotal.toFixed(2) }}</view>
		</view>

		<!-- 订单备注 -->
		<view class="remark-section">
			<view class="remark-label">订单备注</view>
			<input class="remark-tip" placeholder="请与客服提前沟通(选填)" />
		</view>

		<!-- 温馨提示 -->
		<view class="tip-section">
			<view class="tip-header">
				<uni-icons type="info" size="18" color="#FF9800" class="tip-icon"></uni-icons>
				温馨提示
			</view>
			<view class="tip-content">
				本店鲜花均为下单后第二天统一配货，请耐心等待。如若着急可入店购买，感谢配合!
				鲜花属于鲜活易腐类产品，花束一经包扎或发起配送后则影响二次销售。鲜花产品不支持7天无理由退换货。
				下单即视为同意《用户网络服务使用协议》
			</view>
		</view>

		<!-- 底部结算 -->
		<view class="checkout-footer">
			<view class="total-amount">实付 ¥{{ total.toFixed(2) }}</view>
			<button class="submit-btn" @click="submitOrder">支付</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cardEnabled: true,
				cardText: '',
				cartList: [], // 接收商品列表（用于展示商品信息）
				checkoutTotal: 0, // 存储从 checkout 页面传递的实付款金额
				agreeTip: true,
				selectedAddress: false,
				orderPhone: ''
			};
		},
		computed: {
			// 小计直接使用 checkout 传递的实付款金额
			subtotal() {
				return this.checkoutTotal;
			},
			// 实付金额 = 小计（即 checkout 传递的实付款）
			total() {
				return this.subtotal;
			}
		},
		onLoad(options) {
			// 1. 接收商品列表（用于展示）
			if (options.cartData) {
				try {
					const parsedData = JSON.parse(decodeURIComponent(options.cartData));
					this.cartList = Array.isArray(parsedData) ? parsedData : [];
				} catch (e) {
					console.error('解析商品数据失败：', e);
					uni.showToast({ title: '商品数据错误', icon: 'none' });
					this.cartList = [];
				}
			}

			// 2. 接收 checkout 页面传递的实付款金额（关键修改）
			if (options.checkoutTotal) {
				this.checkoutTotal = parseFloat(options.checkoutTotal) || 0;
			}
		},
		methods: {
			navigateBack() {
				uni.navigateBack({ delta: 1 });
			},
			addAddress() {
				uni.navigateTo({ url: '/pages/address/address' });
			},
			toggleCard(e) {
				this.cardEnabled = e.detail.value;
			},
			updateCardText(e) {
				this.cardText = e.detail.value;
			},
			toggleAgree(e) {
				this.agreeTip = e.detail.value;
			},
			submitOrder() {
				if (!this.selectedAddress) {
					uni.showToast({ title: '请添加收花地址', icon: 'none' });
					return;
				}
				if (!this.agreeTip) {
					uni.showToast({ title: '请同意温馨提示', icon: 'none' });
					return;
				}
				// 提交订单逻辑
				uni.showLoading({ title: '提交中...' });
				setTimeout(() => {
					uni.hideLoading();
					uni.showToast({ title: '支付成功', icon: 'success', duration: 2000 });
					setTimeout(() => {
						uni.navigateTo({ url: '/pages/payment-success/payment-success' });
					}, 2000);
				}, 1500);
			}
		}
	};
</script>

<style scoped>
	.confirm-order-page {
		background-color: #f5f5f5;
		min-height: 100vh;
		font-size: 14px;
	}

	.address-section {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 16px;
		background-color: #fff;
		margin-bottom: 10px;
	}

	.address-label {
		border: 1px solid #E53935;
		color: #E53935;
		padding: 2px 8px;
		border-radius: 4px;
		font-size: 12px;
	}

	.address-add {
		color: #333;
	}

	.phone-section {
		display: flex;
		align-items: center;
		padding: 16px;
		background-color: #fff;
		margin-bottom: 10px;
	}

	.phone-label {
		width: 120px;
		color: #666;
	}

	.phone-icon {
		margin-left: 10px;
	}

	.card-section {
		background-color: #fff;
		margin-bottom: 10px;
		padding: 0 16px;
	}

	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 16px 0;
		border-bottom: 1px solid #eee;
	}

	.card-label {
		color: #333;
	}

	.card-switch {
		transform: scale(0.8);
	}

	.card-input {
		width: 100%;
		height: 120px;
		background-color: #fff5f5;
		border: none;
		padding: 10px;
		margin-bottom: 10px;
	}

	.card-count {
		text-align: right;
		color: #999;
		font-size: 12px;
		margin-bottom: 16px;
	}

	.product-section {
		background-color: #fff;
		margin-bottom: 10px;
		padding: 16px;
	}

	.product-item {
		display: flex;
		margin-bottom: 10px;
	}

	.product-img {
		width: 80px;
		height: 80px;
		margin-right: 10px;
	}

	.product-info {
		flex: 1;
	}

	.product-name {
		color: #333;
		margin-bottom: 5px;
		font-weight: 500;
	}

	.product-price-count {
		display: flex;
		justify-content: space-between;
		margin-top: 5px;
	}

	.product-price {
		color: #E53935;
	}

	.product-count {
		color: #999;
	}

	.product-time {
		color: #000000;
		margin-top: 5px;
		font-size: 12px;
	}

	.subtotal {
		text-align: right;
		font-size: 16px;
		font-weight: 600;
		margin-top: 10px;
	}

	.remark-section {
		display: flex;
		align-items: center;
		padding: 16px;
		background-color: #fff;
		margin-bottom: 10px;
	}

	.remark-label {
		width: 120px;
		color: #666;
	}

	.remark-tip {
		color: #515151;
	}

	.tip-section {
		background-color: #fff;
		margin-bottom: 10px;
		padding: 16px;
	}

	.tip-header {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
	}

	.tip-icon {
		margin-right: 5px;
	}

	.tip-content {
		color: #666;
		line-height: 1.5;
		margin-bottom: 10px;
		font-size: 12px;
	}

	.checkout-footer {
		display: flex;
		align-items: center;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 50px;
		background-color: #fff;
		border-top: 1px solid #eee;
		padding: 0 16px;
	}

	.total-amount {
		color: #E53935;
		font-size: 16px;
		font-weight: 600;
	}

	.submit-btn {
		width: 150px;
		height: 40px;
		line-height: 40px;
		background-color: #E53935;
		color: #fff;
		border-radius: 20px;
		font-weight: 500;
	}
</style>